<template>
  <div class="authorityManage-page">
    <h3>角色列表</h3>
    <BtnWarp>
      <el-button v-if="addShow" type="primary" @click="edit(1)">新增角色</el-button>
    </BtnWarp>

    <!--搜索结果区域-->
    <AreaWarp :padding="false">
      <el-table
        size="mini"
        :data="tableInfo.list"
        style="width: 100%"
        class="pub-table"
        header-row-class-name="pub-table-header-row"
        header-cell-class-name="pub-table-header-cell"
        tooltip-effect="dark"
      >
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="name" label="角色名称"></el-table-column>
        <el-table-column prop="isValid" label="状态" :formatter="filter_status"></el-table-column>
        <el-table-column
          prop="modifyTime"
          label="修改时间"
          min-width="150"
          :formatter="formatter_timeYMDHM"
        ></el-table-column>
        <el-table-column v-if="editShow" prop="id" label="修改">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">修改</el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="operateShow" prop="id" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="operate(scope.row)"
            >{{scope.row.isValid ? '禁用' : '启用'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total,sizes,prev, pager, next, jumper"
        class="pub-page"
        :current-page="searchInfo.page"
        :page-sizes="[20,50,100]"
        :page-size="searchInfo.size"
        :total="tableInfo.total"
        @current-change="search"
        @size-change="handleSizeChange"
      ></el-pagination>
    </AreaWarp>

    <authorityEdit
      :message="message"
      :flag="flag"
      v-if="editVisible"
      @authorityEdit="authorityEdit"
    ></authorityEdit>
  </div>
</template>
<script>
import System from "../../../assets/js/system.js";
import authorityEdit from "./authorityEdit";
export default {
  components: {
    authorityEdit
  },
  data() {
    return {
      searchInfo: {
        page: 1,
        size: 20
      },
      loading: false,
      tableInfo: {
        list: [],
        total: 0
      },
      flag: 1,
      message: null,
      editVisible: false,
      addShow:false,
      editShow:false,
      operateShow:false
    };
  },
  methods: {
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;
      let x = {
        size: that.searchInfo.size,
        page: that.searchInfo.page
      };

      let system = new System(x);
      let reqData = system.getState();

      if (reqData.code) {
        that.showMsg(reqData.message, "error");
        return;
      }

      that.loading = true;
      that.ajaxJson({
        url: "/system/role/list",
        data: reqData,
        success: function(res) {
          if (res.code == "0") {
            that.tableInfo = res.data;
          }
          that.loading = false;
        }
      });
    },
    operate(row) {
      let that = this;
      that.ajaxJson({
        url: "/system/role/setValid",
        data: {
          id: row.id,
          isValid: row.isValid ? 0 : 1
        },
        success: function(res) {
          if (res.code == 0) {
            if (row.isValid == "0") {
              that.showMsg("启用成功", "success");
              row.isValid = 1;
            } else if (row.isValid == "1") {
              that.showMsg("禁用成功", "success");
              row.isValid = 0;
            }
          } else {
            that.showMsg(res.message, "error");
          }
        }
      });
    },
    filter_status(row, column, cellValue, index) {
      switch (cellValue) {
        case "0":
        case 0:
          return "禁用";
        case 1:
          return "启用";
      }
    },
    edit(row) {
      let that = this;
      if (row == 1) {
        that.message = null;
        that.flag = 1;
      } else {
        that.message = {
          id: row.id,
          name: row.name
        };
        that.flag = 2;
      }
      that.editVisible = true;
    },
    authorityEdit() {
      let that = this;
      that.message = null;
      that.editVisible = false;
      that.search();
    },
    //新增按钮显示判断
    isAddShow() {
      let that = this;
      let isAddShow = that.urlPermissions().indexOf("/system/role/new");
      if (isAddShow == "-1") {
        that.addShow = false;
      } else {
        that.addShow = true;
      }
    },
    //修改按钮显示判断
    isEditShow() {
      let that = this;
      let isEditShow = that.urlPermissions().indexOf("/system/role/edit");
      if (isEditShow == "-1") {
        that.editShow = false;
      } else {
        that.editShow = true;
      }
    },
    //启用禁用按钮显示判断
    isOperateShow() {
      let that = this;
      let isOperateShow = that.urlPermissions().indexOf("/system/role/setValid");
      if (isOperateShow == "-1") {
        that.operateShow = false;
      } else {
        that.operateShow = true;
      }
    }
  },
  created() {
    let that = this;
    Promise.all([that.isAddShow(), that.isEditShow(), that.isOperateShow()]).then(
      arr => {
        that.search();
      }
    );
  }
};
</script>
<style lang="less">
.authorityManage-page {
}
</style>
